<script setup lang='ts'>
// import hiddenSearch from '../HiddenSearch/index.vue'
// 已经有自动导入的组件了，重复导入会出现问题
// import { ElDrawer } from 'element-plus'
import { Menu as MenuIcon } from '@element-plus/icons-vue'

const route = useRoute()
const activeIndex = ref('')
// 根据当前路由路径设置 activeIndex
const updateActiveIndex = (path) => {
    if (path.includes('/home/identification')) {
        activeIndex.value = '2'
    } else if (path.includes('/home/birdAtlas')) {
        activeIndex.value = '3'
    } else if (path.includes('/home/birdDetail')) {
        activeIndex.value = '3'
    } else if (path.includes('/home/personalInfo')) {
        activeIndex.value = '4'
    } else if (path.includes('/home')) {
        activeIndex.value = '1'
    } else {
        activeIndex.value = ''
    }
}

//初始化
// updateActiveIndex(route.path)
// console.log("route.path:" +  route.path)
// console.log("activeIndex.value:" +  activeIndex.value)

// 监听路由变化并更新 activeIndex
watch(route, (newRoute) => {
    updateActiveIndex(newRoute.path)
},
{immediate: true}
)


const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const router = useRouter()

const toIndex = () => {
    router.push('/home')
}

const toIdentification = () => {
    router.push('/home/identification')
}

const toPersonalInfo = () => {
    router.push('/home/personalInfo')
}

const toBirdAtlas = () => {
    router.push('/home/birdAtlas')
}

const state = ref('')

interface LinkItem {
    value: string
    link: string
}

const links = ref<LinkItem[]>([])

// 暂时还没用到，搜索框相关的
const loadAll = () => {
    return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
    ]
}

let timeout: ReturnType<typeof setTimeout>
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value

    clearTimeout(timeout)
    timeout = setTimeout(() => {
        cb(results)
    }, 3000 * Math.random())
}
const createFilter = (queryString: string) => {
    return (restaurant: LinkItem) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelectSearch = (item: Record<string, any>) => {
    console.log(item)
}

// 判断是否是手机端
const isMobile = ref(false)
// 抽屉菜单是否显示
const drawerVisible = ref(false)

const checkMobile = () => {
    isMobile.value = window.innerWidth <= 600
}

// checkMobile();

const openDrawer = () => {
    drawerVisible.value = true
}
const closeDrawer = () => {
    drawerVisible.value = false
}

// 在挂载之后监听窗口大小变化，并更新isMobile
onMounted(() => {
    links.value = loadAll()
    window.dispatchEvent(new Event('resize'))
    checkMobile()
    window.addEventListener('resize', checkMobile)
})
// 在卸载之前移除窗口大小变化监听
onBeforeUnmount(() => {
    window.removeEventListener('resize', checkMobile)
})

const handleDrawerNav = (fn) => {
    fn()
    closeDrawer()
}
</script>

<template>
    <el-container class="container">
        <el-header class="header">
            <!-- PC/平板端菜单 -->
            <el-menu v-if="!isMobile" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="5">
                    <img class="logo" src="@/assets/logo.png" alt="logo" />
                </el-menu-item>
                <div class="flex-grow"></div>
                <!-- TODO 这个搜索框有空解决一下 -->
                <div class="search-container">
                    <img class="search-logo" src="@/assets/search.png" alt="search" />
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Search..."
                        @select="handleSelectSearch" />
                </div>
                <!-- <el-menu-item index="0">
                    <img class="search-logo" src="@/assets/search.png" alt="search" />
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Search..."
                        @select="handleSelectSearch" />
                </el-menu-item> -->
                <el-menu-item index="1" @click="toIndex">首页</el-menu-item>
                <el-menu-item index="2" @click="toIdentification">鸟类分类（识别）</el-menu-item>
                <el-menu-item index="3" @click="toBirdAtlas">鸟类大全</el-menu-item>
                <el-menu-item index="4" @click="toPersonalInfo">个人中心</el-menu-item>
            </el-menu>
            <!-- 手机端顶部栏 -->
            <div v-else class="mobile-header">
                <img class="logo" src="@/assets/logo.png" alt="logo" />
                <div class="mobile-search">
                    <img class="search-logo" src="@/assets/search.png" alt="search" />
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Search..."
                        @select="handleSelectSearch" />
                </div>
                <!-- 汉堡按钮 -->
                <el-icon class="menu-icon" @click="openDrawer"><MenuIcon /></el-icon>
                <!-- <div class="menu-icon" @click="() => { console.log('click'); openDrawer(); }">
                    <el-icon><MenuIcon /></el-icon>
                </div> -->
            </div>
        </el-header>
        <el-main class="main">
            <router-view></router-view>
        </el-main>
        <el-footer class="footer">
            鸟鸣声识别 . All Rights Reserved By ********
        </el-footer>
    </el-container>
    
    <!-- 手机端抽屉菜单，只显示菜单项 -->
    <el-drawer 
    v-model="drawerVisible" 
    direction="rtl" 
    size="70vw" 
    :with-header="false" 
    :append-to-body="true"
    >
        <el-menu :default-active="activeIndex" class="drawer-menu" mode="vertical" :ellipsis="false">
            <el-menu-item index="1" @click="() => handleDrawerNav(toIndex)">首页</el-menu-item>
            <el-menu-item index="2" @click="() => handleDrawerNav(toIdentification)">鸟类分类（识别）</el-menu-item>
            <el-menu-item index="3" @click="() => handleDrawerNav(toBirdAtlas)">鸟类大全</el-menu-item>
            <el-menu-item index="4" @click="() => handleDrawerNav(toPersonalInfo)">个人中心</el-menu-item>
        </el-menu>
    </el-drawer>
</template>

<style scoped>
.container {
    height: 100%;
    width: 100%;
}
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.header {
    /* position: relative;
    z-index: 10; */
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main {
    background-color: #fff;
    color: #333;
    /* text-align: center;
    line-height: 160px; */
    padding: 0;
}

.footer {
    background-color: gray;
    color: #333;
    text-align: center;
    line-height: 60px;
}

/* .hidden-search{
    display: flex;
    align-items: center;
    justify-content: center;
} */
.flex-grow {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 90%;
    width: 90%;
}

.search-logo {
    height: 30px;
    width: 30px;
    margin-right: 4px;
}

/* 搜索框宽度适配，防止错位 */
.el-menu-item .el-autocomplete {
    width: 200px;
    max-width: 60vw;
}

/* PC端样式 */
@media (min-width: 1025px) {
    .header {
        padding: 0 40px;
    }
    .el-menu-demo {
        font-size: 18px;
        height: 64px;
        align-items: center;
        width: 100%;
    }
    .el-menu-item {
        padding: 0 20px;
    }
    .logo {
        width: 48px;
        height: 48px;
    }
}

/* 平板端样式 */
@media (min-width: 601px) and (max-width: 1024px) {
    .header {
        padding: 0 10px;
    }
    .el-menu-demo {
        font-size: 16px;
        height: 56px;
        width: 100%;
    }
    .el-menu-item {
        padding: 0 10px;
    }
    .logo {
        width: 40px;
        height: 40px;
    }
    .el-menu-item .el-autocomplete {
        width: 120px;
        max-width: 40vw;
    }
}

/* 手机端样式 */
@media (max-width: 600px) {
    .header {
        padding: 0 2vw;
    }
    /* .el-menu-demo {
        display: none !important;
    } */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 48px;
        background: #fff;
        /* position: relative; */
    }
    .logo {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    /* .flex-grow {
        display: none;
    } */
    .mobile-search {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin: 0 8px; */
        /* min-width: 0; */
    }
    .el-menu-item .el-autocomplete, .mobile-search .el-autocomplete {
        width: 100%;
        /* flex: 1; */
        max-width: none;
    }
    .menu-icon {
        /* display: block; */
        /* flex-shrink: 0; */
        font-size: 24px;
        cursor: pointer;
    }
    .drawer-menu {
        width: 100%;
    } 
}

/* .menu-icon-abs {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 28px;
    cursor: pointer;
    z-index: 3100;
} */
/* .mobile-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background: #fff;
}
.mobile-search {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.drawer-menu {
    width: 100%;
} */
</style>